<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <h3>1.事件处理方法v-on</h3>
        <button v-on:click='say'>say{{msg}}</button>
        <button v-on:click='warn("ggg")'>warn</button>
        <button v-on:click='myclick("ppp",$event)'>dosomething</button>
        <h3>2.事件修饰符</h3>
        <div @click="todo">
            <button @click="doThis">单机事件会传播</button>
        </div>
        <div @click="todo">
            <button @click.stop="doThis">阻止单击时间继续传播</button>
        </div>
        <!-- 阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="doStop">百度@click.prevent默认行为被阻止</a>
        <br>
        <!-- 点击只会触发一次 -->
        <button @click.once="doOnly">点击只会触发一次:{{num}}</button>
        <br>
        <input type="text" @keyup.enter="keyEvent"/>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            num:0
        },
        methods: {
            say: function (event) {
                alert(this.msg)
                console.info(event.target.innerHTML)
            },
            warn: function (data) {
                console.info(data)
            },
            myclick: function (data, event) {
                console.info(data)
                console.info(event.target.tagName)
            },
            doThis: function () {
                alert('doThis.....')
            },
            todo: function () {
                alert('todo.....')
            },
            doStop: function () {
                console.info('doStop^-^')
            },
            doOnly:function(){
                this.num++;
            },
            keyEvent:function(){
                alert("按下了enter键")
            },
        }
    })
</script>

</html>